<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            margin: 50px;
        }

        #box {
            width: 500px;
            height: 500px;
            border: solid 1px red;
            position: relative;
            margin-top: 10px;
        }

        #move {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="container">
        <button id="left-but">向左走</button>
        <button id="right-but">向右走</button>
    </div>

    <!-- box 小球移动范围
         move 移动体 -->
    <div id="box">
        <div id="move"></div>
    </div>
</body>
<script>
    function container(leftBut,rightBut,move,box){}
    var leftBut = document.getElementById('left-but');
    var rightBut = document.getElementById('right-but');
    var move = document.getElementById('move');
    var box = document.getElementById('box');
    //获取最大移动距离
    var max = box.offsetWidth - move.offsetWidth;
    //获取小盒子在大盒子中x的偏移量
    var x = move.offsetLeft;
    var interid1;
    var interid2;
    rightBut.onclick = function (e) {
        //从哪个地方开始
        var left1 = move.offsetLeft;
        clearInterval(interid2);
        interid1 = setInterval(function () {
            left1 += 15;
            if (left1 >= max) {
                left1 = max;
                clearInterval(interid1);
            }
            move.style.left = left1 + 'px';
        }, 20)
    }

    leftBut.onclick = function (e) {
        //清除向右的定时器
        clearTimeout(interid1);
        var left1 = move.offsetLeft;
        interid2 = setInterval(function () {
            left1 -= 15;
            if (left1 <= x) {
                left1 = x;
                clearInterval(interid2);
            }
            move.style.left = left1 + 'px';
        }, 20)
    }


// //


//     function container(box,move,but1,but2) {
//         //获取最大移动距离
//         var max = box.offsetWidth - move.offsetWidth;
//         //获取小盒子在大盒子中x的偏移量
//         var x = move.offsetLeft;
//         var interid1;
//         var interid2;
//         but1.onclick = function (e) {
//             //清除向右的定时器
//             clearTimeout(interid1);
//             var left1 = move.offsetLeft;
//             interid2 = setInterval(function () {
//                 left1 -= 15;
//                 if (left1 <= x) {
//                     left1 = x;
//                     clearInterval(interid2);
//                 }
//                 move.style.left = left1 + 'px';
//             }, 20);
//         }
//         but2.onclick = function (e) {
//             //清除向右的定时器
//             clearTimeout(interid2);
//             var left1 = move.offsetLeft;
//             interid1 = setInterval(function () {
//                 left1 += 15;
//                 if (left1 >= x) {
//                     left1 = x;
//                     clearInterval(interid1);
//                 }
//                 move.style.left = left1 + 'px';
//             }, 20);
//         }
//     }
</script>

</html>